<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useIndexStore } from '@/pinia'
import { request } from '@/utils/axios/request.js'
import { ElMessage } from "element-plus"
import local from '@/components/local.vue'

let locabob = ref(true)

// 定义一个空数组
let tableData = ref([])

const store = useIndexStore();

// 定义起始页
let currentPage = ref(1);
// 定义每页默认展示数据
let pageSize = ref(10);

// 计算每页渲染的数据
let currentDate = computed(() => {
    let statIndex = (currentPage.value - 1) * pageSize.value
    let endIndex = currentPage.value * pageSize.value
    return tableData.value.slice(statIndex, endIndex);
})

// 定义姓名绑定框
let input = ref('')
// 定义审批状态
let value = ref();
// 下拉框状态
let options = reactive([
    {
        value: '待审批',
        label: '待审批'
    },
    {
        value: '未通过',
        label: '未通过'
    },
    {
        value: '已通过',
        label: '已通过'
    },
])
// 下拉框出差类型
let option = reactive([
    {
        value: '省内出差',
        label: '省内出差'
    },
    {
        value: '省外出差',
        label: '省外出差'
    },
    {
        value: '国外出差',
        label: '国外出差'
    },
])

// 计算出差天数
const sum = () => {
    const day = newTableDate.end_time.getTime() - newTableDate.start_time.getTime();
    newTableDate.trip_duration = day / (1000 * 60 * 60 * 24);
    if (newTableDate.trip_duration < 0) {
        ElMessage.warning('不能为负数');
        newTableDate.end_time = '';
        newTableDate.trip_duration = '';
    }
}

// 请求数据
let usernameLoca = localStorage.getItem('username')
let userItem = ref('')
let findAll = null
let newTableDate = null
if (usernameLoca) {
    findAll = async () => {
        try {
            locabob.value = true
            let salaryDate = await request({
                url: 'admin/business/businessAll',
                method: 'get',
            })
            let newdata = await request({
                url: `/admin/user/users1?username=${usernameLoca}`,
                method: 'get'
            })
            userItem.value = newdata.data[0]
            if (userItem.value.department == '技术部' && userItem.value.position != '项目经理') {
                salaryDate.data = salaryDate.data.filter(item => item.department == '技术部' && item.position != '项目经理')
            } else if (userItem.value.department == '人事部' && userItem.value.position != '人事经理') {
                salaryDate.data = salaryDate.data.filter(item => item.department == '人事部' && item.position != '人事经理')
            } else if (userItem.value.department == '人事部' && userItem.value.position == '人事经理') {
                salaryDate.data = salaryDate.data.filter(item => item.department == '人事部')
            } else if (userItem.value.department == '技术部' && userItem.value.position == '项目经理') {
                salaryDate.data = salaryDate.data.filter(item => item.department == '技术部')
            }
            newTableDate = reactive({
                "nickname": userItem.value.nickname,
                "trip_type": "",
                "department": userItem.value.department,
                "position": userItem.value.position,
                "trip_reason": "",
                "start_time": "",
                "end_time": "",
                "trip_duration": "",
                "approval_status": "",
                "approval_comment": "",
                "created_time": ''
            })
            tableData.value = salaryDate.data.sort((a, b) => b.id - a.id)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
    findAll()
}

// 定义一个新的空对象
newTableDate = reactive({
    "nickname": userItem.value.nickname,
    "trip_type": "",
    "department": userItem.value.department,
    "position": userItem.value.position,
    "trip_reason": "",
    "start_time": "",
    "end_time": "",
    "trip_duration": "",
    "approval_status": "",
    "approval_comment": "",
    "created_time": ''
})


// 重置
let closed = () => {
    if (Recycletext.value == "关闭回收站") {
        Recycleall();
        input.value = ''
        value.value = ''
        return;
    }
    input.value = ''
    value.value = ''
    findAll()
}

// 开启新增
let sheZhiCai = () => {
    isShowD.value = false;
    caiDanS.value = true;
    title.value = '新增';
    newTableDate.created_time = new Date().toLocaleString()

}

// 关闭新增
let caiDanS = ref(false)
let delCai = () => {
    caiDanS.value = false
    newTableDate = reactive({
        "nickname": userItem.value.nickname,
        "trip_type": "",
        "department": userItem.value.department,
        "position": userItem.value.position,
        "trip_duration": "",
        "trip_reason": "",
        "start_time": "",
        "end_time": "",
        "approval_status": "",
        "approval_comment": "",
        "created_time": ''
    });
}


// 查询数据
const search = async () => {
    if (Recycletext.value == "关闭回收站") {
        try {
            locabob.value = true
            let newdata = await request({
                url: `/admin/business/Recycles?nickname=${input.value}&approval_status=${value.value}`,
                method: 'get'
            })
            // 显示成功信息
            ElMessage.success("查询成功")
            newRecycledata.value = newdata.data
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
        return;
    }
    try {
        locabob.value = true
        let data = await request({
            url: `/admin/business/businessB?nickname=${input.value}&approval_status=${value.value}`,
            method: 'get'
        })
        // 显示成功信息
        ElMessage.success('查询成功')
        tableData.value = data.data
    } catch (error) {
        console.log(error);
    }
    locabob.value = false
}


// 定义出差申请显示隐藏
let isShowU = ref(true);
// 审批状态显示隐藏
let isShowD = ref(false);
// 定义新增的数据
let title = ref('出差申请');

// 修改数据
let newId = ref();
const updateRow = (id) => {
    sheZhiCai();
    isShowD.value = true;
    let obj = tableData.value.find(item => item.id == id);
    newTableDate = reactive(JSON.parse(JSON.stringify(obj)));
    newId.value = id;
    title.value = '修改';
}

// 删除每条数据
let lastid = ref('')
let current = ref({
    "nickname": "",
    "trip_type": "",
    "department": "",
    "position": "",
    "trip_duration": "",
    "trip_reason": "",
    "start_time": "",
    "end_time": "",
    "approval_status": "",
    "approval_comment": "",
    "created_time": ''
})
const deleteRow = (id) => {
    lastid.value = id
    tableData.value.forEach((item, index) => {
        if (item.id == id) {
            current.value.nickname = item.nickname
            current.value.trip_type = item.trip_type
            current.value.department = item.department
            current.value.position = item.position
            current.value.trip_duration = item.trip_duration
            current.value.trip_reason = item.trip_reason
            current.value.start_time = item.start_time
            current.value.end_time = item.end_time
            current.value.approval_status = item.approval_status
            current.value.approval_comment = item.approval_comment
            current.value.created_time = item.created_time
        }
    })
}
let confirmEvent = async () => {
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/business/businessB',
            method: 'delete',
            data: { id: lastid.value }
        })
        findAll();
        ElMessage.success(data.message)
    } catch (error) {
        console.log(error);
    }
    try {
        let Recycledata = await request({
            url: '/admin/business/Recycleadd',
            method: 'post',
            data: current.value
        })
        Recycleall()
    } catch (error) {
        console.log(error);
    }
    locabob.value = false
}
let cancelEvent = () => {
    console.log("cancelEvent!");
}

// 格式化时间
const times = (data) => {
    var year = data.getFullYear();
    var mon = data.getMonth() + 1;
    var date = data.getDate();
    if (mon < 10) {
        mon = '0' + mon;
    };
    if (date < 10) {
        date = '0' + date;
    }
    var postDate = year + '-' + mon + '-' + date;
    return postDate;
}


// 保存
const save = async () => {
    if (title.value == '修改') {
        let obj = JSON.parse(JSON.stringify(newTableDate))
        if (obj.nickname == '' || obj.trip_type == '' || obj.trip_duration == '' || obj.trip_reason == '' || obj.approval_status == '' || obj.timeDate == '') {
            ElMessage.warning('不能为空')
            return;
        }
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/business/businessB',
                method: 'put',
                data: { newTableDate, id: newId.value }
            })
            findAll();
            ElMessage.success(data.message)
        } catch (error) {
            console.log(error);
        }
        locabob.value = false
    } else {
        if (newTableDate.nickname == '' || newTableDate.trip_type == '' || newTableDate.trip_duration == '' || newTableDate.trip_reason == '' || newTableDate.start_time == '' || newTableDate.end_time == '') {
            ElMessage.error("信息不能为空")
            return;
        }
        newTableDate.start_time = times(newTableDate.start_time)
        newTableDate.end_time = times(newTableDate.end_time)
        newTableDate.approval_status = '待审批';
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/business/businessB',
                method: 'post',
                data: { newTableDate }
            })
            findAll();
            ElMessage.success(data.message)
        } catch (error) {
            console.log(error);
        }
        locabob.value = false
    }
    delCai()
}

//=======================================回收站===========================================
// 小眼睛
let showPassword = ref(false)
//确认密码弹窗
let dialogFormVisible = ref(false)
let form = reactive({
    password1: '',
    password2: '',
})
let newRecycledata = ref([])
//封装查询所有数据
let Recycleall = async () => {
    try {
        let Recycledata = await request({
            url: "/admin/business/RecycleAll",
            method: 'get'
        })
        newRecycledata.value = Recycledata.data.sort((a, b) => b.id - a.id)
    } catch (err) {
        console.log(err);
    }
}
let boxShow = ref(true)
let Recycletext = ref("回收站")
//回收按钮
let Recycle = () => {
    if (Recycletext.value == "回收站") {
        boxShow.value = false
        Recycleall()
        Recycletext.value = "关闭回收站"
    } else if (Recycletext.value == "关闭回收站") {
        boxShow.value = true
        Recycletext.value = "回收站"
        input.value = ''
        value.value = ''
    }
}
//回收站删除按钮
let Recycleid = ref('')
let remove = (id) => {
    dialogFormVisible.value = true
    Recycleid.value = id
}
// 文件导出
import * as XLSX from 'xlsx'
const fileOut = () => {
    if (confirm('确认导出吗')) {
        const data = tableData.value; // json数据
        const sheetName = 'business'; // 表格名称
        const sheetHeader = ["nickname", "trip_type", "department", "position", "trip_duration", "trip_reason", "start_time", "end_time", "approval_status", "approval_comment", "created_time"]; // 表头
        const sheetData = data.map(item => [item.nickname, item.trip_type, item.department, item.position, item.trip_duration, item.trip_reason, item.start_time, item.end_time, item.approval_status, item.approval_comment, item.created_time]); // 表格数据
        sheetData.unshift(sheetHeader); // 将表头插入表格数据第一行
        const worksheet = XLSX.utils.aoa_to_sheet(sheetData); // 将表格数据转换为worksheet
        const workbook = XLSX.utils.book_new(); // 创建workbook
        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName); // 将worksheet插入workbook
        XLSX.writeFile(workbook, 'business.xlsx'); // 下载表格
    }
}

// 文件导入
const fileOver = (event) => {
    const file = event.target.files[0]; // 获取上传的文件
    const reader = new FileReader(); // 创建FileReader对象
    reader.onload = async (e) => {
        const data = e.target.result; // 获取文件内容
        const workbook = XLSX.read(data, { type: 'binary' }); // 将文件内容转换为workbook
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个worksheet
        const sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 将worksheet转换为json数据
        const header = sheetData[0]; // 获取表头
        const jsonData = sheetData.slice(1).map(row => {
            const obj = {};
            header.forEach((h, i) => {
                obj[h] = row[i];
            });
            return obj;
        }); // 将表格数据转换为json数据
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/business/businessB1',
                method: 'post',
                data: jsonData
            })
            findAll()
            ElMessage.success(data.message)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    };
    reader.readAsBinaryString(file); // 读取文件内容
}


//确认密码删除
let passave = async () => {
    let userItems = ref('')
    let usernameLoca = localStorage.getItem('username')
    if (usernameLoca) {
        try {
            let newdata = await request({
                url: `/admin/user/users1?username=${usernameLoca}`,
                method: 'get'
            })
            userItems.value = newdata.data[0]
        } catch (err) {
            console.log(err);
        }
    }
    if (form.password1 != userItems.value.password) {
        ElMessage.error('原始密码错误')
        form.password1 = ''
        form.password2 = ''
        return;
    } else if (form.password2 != userItems.value.password) {
        ElMessage.error('确认密码错误')
        form.password2 = ''
        return;
    } else if (form.password2 == userItems.value.password || userItems.value.password == form.password1) {
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/business/Recycledel',
                method: 'delete',
                data: { id: Recycleid.value }
            })
            Recycleall()
            ElMessage.success(data.message)
            dialogFormVisible.value = false
            form.password1 = ''
            form.password2 = ''
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
}
//恢复按钮
let recover = (id) => {
    Recycleid.value = id
    newRecycledata.value.forEach((item, index) => {
        if (item.id == id) {
            current.value.nickname = item.nickname
            current.value.trip_type = item.trip_type
            current.value.department = item.department
            current.value.position = item.position
            current.value.trip_duration = item.trip_duration
            current.value.trip_reason = item.trip_reason
            current.value.start_time = item.start_time
            current.value.end_time = item.end_time
            current.value.approval_status = item.approval_status
            current.value.approval_comment = item.approval_comment
            current.value.created_time = item.created_time
        }
    })
}
//恢复确认弹窗
let confirmrecover = async () => {
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/business/Recycledels',
            method: 'delete',
            data: { id: Recycleid.value }
        })
        Recycleall()
        ElMessage.success(data.message)
    } catch (err) {
        console.log(err);
    }
    try {
        let Recycledata = await request({
            url: '/admin/business/businessB',
            method: 'post',
            data: { newTableDate: current.value }
        })
        findAll()
    } catch (error) {
        console.log(error);
    }
    locabob.value = false
}
</script>


<template>
    <div class="box_boxz">
        <local v-show="locabob" />
        <div class="container">
            <ul class="nav_ul">
                <li>
                    <span>姓名:&nbsp;</span>
                </li>
                <li>
                    <el-input v-model="input" placeholder="请输入姓名" />
                </li>
                <li><span>审批状态:&nbsp;</span>
                    <el-select v-model="value" placeholder="请选择状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li><el-button type="primary" @click="search">搜索</el-button></li>
                <li><el-button @click="closed">重置</el-button></li>
                <li v-show="boxShow"><el-button type="primary" @click="sheZhiCai" v-show="isShowU">出差申请</el-button></li>
                <li><el-button type="success" @click="fileOut">文件导出</el-button></li>
                <li  v-show="store.role == 1 || store.role == 0">
                    <label for="files">
                        <p class="daoRu">文件导入</p>
                    </label>
                    <input type="file" style="display: none;" id="files" @change="fileOver">
                </li>
                <li style="margin-left: 10px;"><el-button type="primary" @click="Recycle" v-show="store.role == 0">{{
                    Recycletext }}</el-button></li>
            </ul>
            <div class="box" v-show="boxShow">
                <el-table ref="multipleTableRef" :data="currentDate">
                    <el-table-column fixed prop="nickname" label="姓名" show-overflow-tooltip />
                    <el-table-column property="trip_type" label="出差类型" show-overflow-tooltip />
                    <el-table-column property="trip_reason" label="出差原因" show-overflow-tooltip />
                    <el-table-column property="start_time" label="开始时间" show-overflow-tooltip />
                    <el-table-column property="end_time" label="结束时间" show-overflow-tooltip />
                    <el-table-column property="trip_duration" label="出差时间(天)" show-overflow-tooltip />
                    <el-table-column property="approval_status" label="审批状态" show-overflow-tooltip />
                    <el-table-column property="approval_comment" label="审批备注" show-overflow-tooltip />
                    <el-table-column property="created_time" label="创建时间" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作" v-if="store.role == 1 || store.role == 0">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="updateRow(scope.row.id)"
                                v-show="store.role == 1 || store.role == 0">
                                修改
                            </el-button>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF"
                                title="确定删除吗?" @confirm="confirmEvent" @cancel="cancelEvent">
                                <template #reference>
                                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row.id)"
                                        v-show="store.role == 0">
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 回收站表 -->
            <div class="box" v-show="!boxShow">
                <el-table ref="multipleTableRef" :data="newRecycledata">
                    <el-table-column fixed prop="nickname" label="姓名" show-overflow-tooltip />
                    <el-table-column property="trip_type" label="出差类型" show-overflow-tooltip />
                    <el-table-column property="trip_reason" label="出差原因" show-overflow-tooltip />
                    <el-table-column property="start_time" label="开始时间" show-overflow-tooltip />
                    <el-table-column property="end_time" label="结束时间" show-overflow-tooltip />
                    <el-table-column property="trip_duration" label="出差时间(天)" show-overflow-tooltip />
                    <el-table-column property="approval_status" label="审批状态" show-overflow-tooltip />
                    <el-table-column property="approval_comment" label="审批备注" show-overflow-tooltip />
                    <el-table-column property="created_time" label="创建时间" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作" v-if="store.role == 1 || store.role == 0">
                        <template #default="scope">
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF"
                                title="确定恢复吗?" @confirm="confirmrecover" @cancel="cancelEvent">
                                <template #reference>
                                    <el-button link type="primary" size="small" @click.prevent="recover(scope.row.id)">
                                        恢复
                                    </el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small" @click.prevent="remove(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="demo-pagination-block" v-show="boxShow">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length" />
            </div>
            <!-- 回收站分页 -->
            <div class="demo-pagination-block" v-show="!boxShow">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                    :total="newRecycledata.length" />
            </div>
        </div>
        <div class="sheZhi" :style="{ width: caiDanS ? '460px' : '0' }">
            <dl>
                <dt>
                <dd>{{ title }}</dd>
                <dd @click="delCai"><span class="iconfont icon-shanchu2"></span></dd>
                </dt>
            </dl>
            <ul>
                <li>
                    <span>姓名:&nbsp;</span>
                    <el-input v-model="newTableDate.nickname" placeholder="请输入姓名" clearable disabled />
                </li>
                <li>
                    <span>部门:&nbsp;</span>
                    <el-input v-model="newTableDate.department" placeholder="请输入部门" clearable disabled />
                </li>
                <li>
                    <span>岗位:&nbsp;</span>
                    <el-input v-model="newTableDate.position" placeholder="请输入岗位" clearable disabled />
                </li>
                <li>
                    <span>出差类型:&nbsp;</span>
                    <el-select v-model="newTableDate.trip_type" placeholder="请选择出差类型">
                        <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <span>出勤原因:&nbsp;</span>
                    <el-input v-model="newTableDate.trip_reason" type="text" placeholder="请输入出差原因" show-number />
                </li>
                <li v-show="title != '修改'">
                    <span>开始时间:&nbsp;</span>
                    <el-date-picker v-model="newTableDate.start_time" type="date" placeholder="请选择开始时间" />
                </li>
                <li v-show="title != '修改'">
                    <span>结束时间:&nbsp;</span>
                    <el-date-picker v-model="newTableDate.end_time" type="date" placeholder="请输入结束时间" @change="sum" />
                </li>
                <li>
                    <span>出差时间:&nbsp;</span>
                    <el-input v-model="newTableDate.trip_duration" type="number" placeholder="请输入出差时间" show-number
                        disabled />
                </li>
                <li v-if="newTableDate.nickname != userItem.nickname || store.role == 0" v-show="isShowD">
                    <span>审批状态:&nbsp;</span>
                    <el-select v-model="newTableDate.approval_status" placeholder="请选择状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li v-if="newTableDate.nickname != userItem.nickname || store.role == 0" v-show="isShowD">
                    <span>审批备注:&nbsp;</span>
                    <el-input v-model="newTableDate.approval_comment" type="text" placeholder="请输入审批备注" show-number />
                </li>
                <li>
                    <span>创建时间:&nbsp;</span>
                    <el-input v-model="newTableDate.created_time" placeholder="请输入创建时间" show-number disabled />
                </li>
                <li>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="delCai">取消</el-button>
                </li>
            </ul>
        </div>
        <div class="mengBan" v-show="caiDanS" @click="delCai"></div>
        <div class="popbox">
            <el-dialog v-model="dialogFormVisible" title="确认密码">
                <el-form :model="form">
                    <el-form-item label="原始密码" label-width="140px">
                        <el-input v-model="form.password1" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                    <el-form-item label="确认密码" label-width="140px">
                        <el-input v-model="form.password2" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="passave">
                            确认删除
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>


<style lang="less" scoped>
.daoRu {
    width: 80px;
    height: 32px;
    color: white;
    border-radius: 5px;
    background-color: #7ec050;
    text-align: center;
    line-height: 32px;
    font-weight: 400;
}

.box_boxz {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);

    .container {
        display: flex;
        flex-direction: column;
        height: 100%;

        .nav_ul {
            display: flex;
            flex-shrink: 0;
            height: 50px;
            line-height: 30px;
            font-size: 14px;
            padding-left: 20px;
            margin-top: 10px;
            background: rgb(255, 255, 255);

            li {
                margin-left: 10px;
                font-weight: 700;

                // &:nth-child(3),
                // &:nth-child(4) {
                //     margin-left: 20px;
                // }
            }

            ;
        }

        .demo-pagination-block {
            padding-bottom: 40px;
            overflow: hidden;
            align-self: center;
        }

        .box {
            display: flex;
            padding: 0 20px;
        }
    }

    // 设置
    .sheZhi {
        width: 0px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        background-color: white;
        z-index: 1001;
        box-shadow: -1px 0 10px rgb(143, 143, 143);
        transition: all 0.3s ease-in-out;

        dl {
            display: flex;
            flex-direction: column;

            dt:nth-child(1) {
                width: 100%;
                padding: 16px 24px;
                display: flex;
                justify-content: space-between;
                border-bottom: 0.5px solid rgba(216, 214, 214, 0.5);
                margin-bottom: 45px;


                dd:nth-child(1) {
                    font-size: 20px;
                }

                dd:nth-child(2) {
                    margin-right: 60px;

                }
            }

        }

        ul {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 0 30px;

            .demo-pagination-block {
                padding-bottom: 40px;
                overflow: hidden;
                align-self: center;
            }

            li {
                width: 100%;
                margin-bottom: 20px;
                display: flex;

                span {
                    flex-shrink: 0;
                    margin-right: 20px;
                    font-weight: 600;
                    font-size: 14px;
                    flex-direction: column;

                }
            }

        }


    }

    // 蒙版
    .mengBan {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: rgba(247, 247, 247, 0.3);
        filter: brightness(1%);
    }

    .active {
        background-color: #1890FF;

        span {
            color: white;
        }

        a {
            color: white !important;
        }
    }

    .active1 {
        span {
            color: white;
        }

        .icon-jiantouxia {
            transform: rotateX(180deg);
            transition: all 0.1s linear;
        }
    }
}

.popbox {

    :deep .el-input {
        width: 300px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }

    :deep .el-form {
        margin-left: 50px;
    }
}
</style>